<!-- 组合式 -->
<script setup>
	import {
		ref,
		reactive,
		computed,
		watch,
		onMounted,
	} from 'vue';
	
	import {
		ElMessage
	} from 'element-plus'
	import api from '@/api/api';
	import util from '@/utils/util';

	import {
		useUserStore,
		useConfigStore,
	} from '@/stores'

	// 组件
	import homeLeftVue from './components/home-left.vue'
	import homeRightVue from './components/home-right.vue'

	// 参数
	const pages = reactive({

		banner: [],
		banner2: [],

		api_data: {
			type: '',
			pageNum: 1,
			pageSize: 8,
		},

		list: [],
		total: 0,
	})

	// 导航栏
	const navs = computed(() => {

		// 获取系统配置中的赛事类型
		const skill_type = useConfigStore().config.skill_type || [];
		let arr = [{
			name: '全部',
			id: ''
		}, ]

		// 追加到全部 中
		skill_type.forEach(item => {
			arr.push({
				name: item.dictLabel,
				id: item.dictValue,
			})
		})

		// 返回
		return arr
	})

	// 挂载
	onMounted(() => {
		init(); // 初始化
	})

	// 切换类型
	watch(() => pages.api_data.type, (n) => {
		getSkill();
	})

	// 初始化
	async function init() {}
</script>
<template>
	<div class="HomeView">

	</div>
</template>

<style lang="scss" scoped>
	.HomeView {
		overflow: hidden;
		background-color: white;
		// display: flex;
		// flex-direction: column;
		// align-items: center;

		.banner-view {

			// border: 1px solid;
			.el-image {
				font-size: 0;
				width: 100%;
				height: 100%;
			}
		}

		.layout2 {
			background-color: white;
			max-width: 1290px;
			margin: 0 auto;
			padding: 70px 0 50px 0;
			display: flex;
			gap: 20px;

			.layout2-left {
				width: 40%;
			}

			.layout2-right {
				flex: 1;
			}
		}

		.layout3 {
			background: #DBF1FF;
			padding: 40px 200px;
			display: flex;
			justify-content: space-between;
			gap: 40px;

			img {
				flex: 1;
				// pointer-events: none;
				cursor: pointer;
				overflow: hidden;
			}
		}

		.layout4 {
			background-color: #F7F9FB;
			padding: 60px 200px;

			display: flex;
			flex-direction: column;
			align-items: center;

			.layout4-title {
				font-weight: bold;
				font-size: 40px;
				color: #181F27;
				line-height: 60px;
			}

			.layout4-biao {
				margin-top: 15px;
				width: 70px;
				height: 12px;
				background: #5173F2;
			}

			.l-tab-div {
				margin-top: 40px;
			}

			.l-card-div {
				min-width: 1290px;
				margin-top: 45px;
				// padding: 0 200px;
				display: grid;
				gap: 30px;
				grid-template-columns: repeat(4, 1fr);
			}

			.l-button {
				margin-top: 55px;
				width: 200px;
				line-height: 60px;
				color: #666666;
			}
		}
	}
</style>